<template>
    <div id="app">
      <div id="head">
        <van-icon class="biao" size="25px" @click="toHead()" name="arrow-left"
                  style="position: absolute;left: 10px;" />
        能耗分析
      </div>
      <div id="gai" @click="displayPage()">
        <van-icon id="van" size="20px" name="arrow-down" style="position: absolute;right: 10px;" />
        用能概述
      </div>
      <div v-if="showDiv" style="margin-top: 10px; padding: 10px;">
          <div id="xuan">
            <el-radio-group  v-model="form.deviceEnergy" @change="findByType">
              <el-radio-button label="电" ></el-radio-button>
              <el-radio-button label="水"></el-radio-button>
              <el-radio-button label="燃气"></el-radio-button>
            </el-radio-group>
          </div>
          <div id="select">
            <el-select  v-model="form.regionName" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
      </div>
      <div id="zhu" ref="echartsRef"></div>
      <div id="zhu" ref="echartsRef2" ></div>
      <div id="zhu" ref="echartsRef3"></div>

      <div v-if="showDiv" style="position: absolute;top:150px;left: 20px;width: 150px;height: 30px;">
        <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
        近六个月用能环比
      </div>
      <div v-if="showDiv" style="position: absolute;top:570px;left: 20px;width: 150px;height: 30px;">
        <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
        近六个月用能同比
      </div>
      <div v-if="showDiv" style="position: absolute;top: 980px;left: 20px">
        <span style="color: blue;font-weight: bold;font-size: 18px">|</span>
        用能趋势
      </div>
      <div class="ding" v-if="showDiv">
        <el-radio-group  v-model="form.timeType" @change="findByType" size="small">
          <el-radio-button label="日" ></el-radio-button>
          <el-radio-button label="月"></el-radio-button>
          <el-radio-button label="年"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
  export default {
    data(){
      return{
          form:{
            deviceEnergy:"电"
          },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }],
        showDiv: false,
      }
    },
    methods:{
      displayPage(){
        this.showDiv = true;
        this.initChart();
        this.initChart2();
        this.initChart3();
      },
      findByType(){

      },
      toHead(){
        this.$router.push('/')
      },
      initChart() {
        const chartDom = this.$refs.echartsRef;
        const myChart = echarts.init(chartDom);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', ],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
            },
            {
              type: 'value',
            }
          ],
          series: [
            {
              name: '用电量',
              type: 'bar',
              data: [
                100,140,230,100,130,183
              ]
            },
            {
              name: '环比(%)',
              type: 'line',
              yAxisIndex: 1,
              data: [150,100,200,140,100,118]
            }
          ]
        };

        myChart.setOption(option);
      },
      initChart2() {
        const chartDom = this.$refs.echartsRef2;
        const myChart = echarts.init(chartDom);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              data: ['2018年', '2019年', '2020年', '2021年', '2022年', '2023年', ],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
            },
            {
              type: 'value',
            }
          ],
          series: [
            {
              name: '用电量',
              type: 'bar',
              data: [
                100,140,230,100,130,148
              ]
            },
            {
              name: '同比(%)',
              type: 'line',
              yAxisIndex: 1,
              data: [80,50,70,140,100,223]
            }
          ]
        };

        myChart.setOption(option);
      },
      initChart3() {
        const chartDom = this.$refs.echartsRef3;
        const myChart = echarts.init(chartDom);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: ['1时', '2时', '3时', '4时', '5时', '6时','7时' ],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
            },
            {
              type: 'value',
            }
          ],
          series: [
            {
              name: '今日',
              type: 'line',
              data: [
                100,140,230,100,130,112,111,138
              ],
              areaStyle: {
                color: 'rgb(225,241,243)'
              }
            },
            {
              name: '昨日',
              type: 'line',
              yAxisIndex: 1,
              data: [150,100,200,140,100,108,142,170],
              areaStyle: {
                color: 'rgb(220,231,251)'
              }
            }
          ]
        };
        myChart.setOption(option);
      },
    },
    created(){
    },
  }
</script>

<style>
.ding{
  position: absolute;
  top: 975px;
  left: 250px;
  width: 100%;
  height: 40px;
}
#zhu{
  width: 360px;
  height: 400px;
  margin-top: 20px;
}
#van{
  padding-top: 2px;
  padding-right: 20px;
  width: 20px;
}
#gai{
  width: 100%;
  height: 30px;
  background-color: dodgerblue;
  text-align: left;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 14px;
  color: white;
  margin-bottom: 40px;
}
#select{
  width: 150px;
  position: absolute;top: -30px;right: 5px
}
#xuan{
  height: 40px;
  display: flex;
  padding-left: 10px;
  justify-content: left;
  position: absolute;top: -30px;left: 5px
}
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.biao{
}
#app{

}
</style>
